<template>
  <div class="doc-content">
    <div class="doc-sidebar">
      <div class="toc-title">目录</div>
      <div class="toc-content">
        <div v-for="(item, index) in toc" :key="index" 
          :class="['toc-item', `level-${item.level}`]"
          @click="scrollToSection(item.id)">
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="doc-main" ref="docMain">
      <article class="markdown-body" v-html="content"></article>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value
      } catch (__) {}
    }
    return ''
  }
})

const props = defineProps<{
  content: string
}>()

const docMain = ref<HTMLElement | null>(null)
const toc = ref<Array<{id: string, title: string, level: number}>>([])

// 生成目录
const generateToc = () => {
  if (!docMain.value) return
  const headers = docMain.value.querySelectorAll('h1, h2, h3')
  toc.value = Array.from(headers).map((header, index) => {
    const id = `section-${index}`
    header.id = id
    return {
      id,
      title: header.textContent || '',
      level: parseInt(header.tagName[1])
    }
  })
}

// 滚动到指定章节
const scrollToSection = (id: string) => {
  const element = document.getElementById(id)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

onMounted(() => {
  generateToc()
})
</script>

<style scoped>
.doc-content {
  display: flex;
  height: 100%;
  background: #fff;
}

.doc-sidebar {
  width: 240px;
  border-right: 1px solid #e8e8e8;
  padding: 20px;
  position: sticky;
  top: 0;
  height: 100%;
  overflow-y: auto;
}

.toc-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
}

.toc-content {
  font-size: 14px;
}

.toc-item {
  padding: 4px 8px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s;
  border-radius: 4px;
}

.toc-item:hover {
  background: #f5f5f5;
  color: #1890ff;
}

.toc-item.level-1 {
  font-weight: 600;
  margin-top: 8px;
}

.toc-item.level-2 {
  padding-left: 24px;
}

.toc-item.level-3 {
  padding-left: 40px;
  font-size: 13px;
}

.doc-main {
  flex: 1;
  padding: 40px;
  overflow-y: auto;
}

.markdown-body {
  max-width: 900px;
  margin: 0 auto;
}

:deep(.markdown-body) {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #24292e;
}

:deep(.markdown-body h1) {
  font-size: 2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #eaecef;
  margin: 1em 0;
}

:deep(.markdown-body h2) {
  font-size: 1.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #eaecef;
  margin: 1em 0;
}

:deep(.markdown-body h3) {
  font-size: 1.25em;
  margin: 1em 0;
}

:deep(.markdown-body p) {
  margin: 1em 0;
}

:deep(.markdown-body code) {
  padding: 0.2em 0.4em;
  background-color: rgba(27,31,35,0.05);
  border-radius: 3px;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: 85%;
}

:deep(.markdown-body pre) {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 6px;
}

:deep(.markdown-body pre code) {
  padding: 0;
  background: transparent;
}

:deep(.markdown-body blockquote) {
  margin: 1em 0;
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
}

:deep(.markdown-body ul),
:deep(.markdown-body ol) {
  padding-left: 2em;
  margin: 1em 0;
}

:deep(.markdown-body table) {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

:deep(.markdown-body table th),
:deep(.markdown-body table td) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

:deep(.markdown-body table tr:nth-child(2n)) {
  background-color: #f6f8fa;
}

:deep(.markdown-body img) {
  max-width: 100%;
  box-sizing: border-box;
}
</style> 